<template>
	<div class="shopcart">
		<div class="content" @click="toggleList">
			<div class="content-left">
				<div class="logo-wrap">
					<div class="logo" :class="{'highlight':totalCount>0}">
						<i class="icon-shopping_cart" :class="{'highlight':totalCount>0}"></i>
						
					</div>
					<div class="num" v-show="totalCount>0">{{totalCount}}</div>
				</div>
				<div class="price" :class="{'highlight':totalPrice>0}">￥{{totalPrice}}元</div>
				<div class="desc">另需配送费￥{{deliveryPrice}}元</div>
			</div>
			<div class="content-right" @click.stop.prevent="pay">
				<div class="delivery" :class="payClass">{{payDesc}}</div>
			</div>
		</div>
		<div class="ball-container">
			<transition-group name="drop" tag="div"
		        v-on:before-enter="beforeEnter"
		        v-on:enter="dropEnter"
		        v-on:after-enter="afterEnter">
		        <div class="ball" v-for="(ball,index) in balls" v-show="ball.show" :key="index">
					<div class="inner inner-hook"></div>
		        </div>
		     </transition-group>
		</div>
		<transition name="fade">
			<div class="shopcart-list" v-show="listShow">
				<div class="list-header">
					<h1 class="title">购物车</h1>
					<span class="empty" @click="empty">清空</span>
				</div>
				<div class="list-content"  ref="shopcartList">
					<ul>
						<li class="food" v-for="food in selectFoods">
							<span class="name">{{food.name}}</span>
							<div class="price">
								<span>￥{{food.price*food.count}}</span>
							</div>
							<div class="cartcontrol-wrap">
								<cartcontrol :food="food" v-on:cart-add="dropMove"></cartcontrol>
							</div>
						</li>
					</ul>
				</div>
			</div>
		</transition>
		<transition name="fade">
			<div class="list-mask" v-show="listShow" @click="hideList"></div>
		</transition>
	</div>
</template>

<script>
import BScroll from 'better-scroll';
import cartcontrol from "@/components/cartControl/CartControl"
export default {
	props: {
		selectFoods: {
			type: Array,
			default() {
				return [{
					price: 10,
					count: 1
				}]
			}
		},
		deliveryPrice: {
			type: Number,
			default: 0
		},
		minPrice: {
			type: Number,
			default: 0
		}
	},
	data() {
		return {
			balls: [{
					show: false,
					el: null
				},
				{
					show: false,
					el: null
				},
				{
					show: false,
					el: null
				},
				{
					show: false,
					el: null
				},
				{
					show: false,
					el: null
				}
			],
			droppedBalls: [],
			fold:true
		};
	},
	computed: {
		listShow(){
			if(!this.totalCount){
				this.fold=true;
				return false
			}
			// 有商品的时候以变量show做状态切换
            let show = !this.fold; // fold为true则show为false，fold为false，则show为true
            if(show){
            	this.$nextTick(()=>{
            		if(!this.scroll){
            			this.scroll = new BScroll(this.$refs.shopcartList,{
            				click:true
            			})
            		}else{
            			this.scroll.refresh();
            		}
            	})
            }
            return show
		},
		totalPrice() {
			let total = 0;
			this.selectFoods.forEach((food) => {
				total += food.price * food.count
			})
			return total
		},
		totalCount() {// 根据selectFoods数组计算数量
			let count = 0;
			this.selectFoods.forEach((food) => {
				count += food.count;   // 每种food的count相加
			});
			return count;     // 返回总数量
		},
		payDesc() { // 购物车右侧描述详情
			// 用反引号（波浪线下面）不用拼接字符串，返回{}
			if(this.totalPrice === 0) { // 当前总价为0显示：￥${this.minPrice}元起送
				return `￥${this.minPrice}元起送`;
			} else if(this.totalPrice < this.minPrice) {
				let diff = this.minPrice - this.totalPrice; // 计算距离起送价的差价
				return `还差￥${diff}元起送`; // 返回还差￥${diff}元起送
			} else {
				return `去结算`; // 满足起送价格条件显示去结算
			}
		},
		payClass() {
			if(this.totalPrice < this.minPrice) {
				return 'not-enough'; // 小于起送价，返回not-enough,:class="not-enough"
			} else {
				return 'enough'; // 返回enough,:class="enough"
			}
		}
		
	},
	methods: {
		toggleList(){
			if(!this.totalCount){
				return
			}
				this.fold =!this.fold
			
		},
		hideList(){
			this.fold=true
		},
		pay(){
			if(this.totalPrice<this.minPrice){
				return
			}
			window.alert(`支付￥${this.totalPrice}元`)
		},
		empty(){
			this.selectFoods.forEach((food)=>{
				food.count=""
			})
		},
		dropMove(el) {
			for(var i = 0; i < this.balls.length; i++) {
				let b = this.balls[i];
				if(!b.show) {
					b.show = true;
					b.el = el;
					this.droppedBalls.push(b);
					return;
				}
			}
		},
		beforeEnter(el, done) {
			let count = this.balls.length;
			while(count--) {
				let ball = this.balls[count];
				if(ball.show) {
					let rect = ball.el.getBoundingClientRect();
					let x = rect.left - 32;
					let y = -(window.innerHeight - rect.top - 22);
					el.style.display ='';
					el.style.transform = `translate3d(0,${y}px,0)`;
					el.style.webkitTransform = `translate3d(0,${y}px,0)`;
					let inner = el.getElementsByClassName('inner-hook')[0];
					inner.style.webkitTransform = `translate3d(${x}px,0,0)`;
					inner.style.transform = `translate3d(${x}px,0,0)`;
				}
			}
		},
		dropEnter(el,done) {
			/* eslint-disable no-unused-vars */
			/* 触发浏览器重绘; */
			let rf = el.offsetHeight;
			this.$nextTick(() => {
				el.style.webkitTransform = 'translate3d(0, 0, 0)';
				el.style.transform = 'translate3d(0, 0, 0)';
				let inner = el.getElementsByClassName('inner-hook')[0];
				inner.style.webkitTransform = 'translate3d(0, 0, 0)';
				inner.style.transform = 'translate3d(0, 0, 0)';
				el.addEventListener('transitionend', done);
//				done()
			});
		},
		afterEnter(el) {
			let ball = this.droppedBalls.shift();
			if(ball){
				ball.show = false;
				el.style.display = 'none';
				ball.el = null;
			}
			
			
		}
	},
	components:{
		cartcontrol
	},
}
</script>

<style lang="stylus">
	@import '~common/stylus/max.styl'; 
	.shopcart
		position:fixed
		left:0
		bottom:0
		z-index:50
		height:48px
		background:#000
		width:100%
		.content
			display:flex
			background:#141d27
			.content-left
				flex:1
				.logo-wrap
					display: inline-block
					position: relative
					top: -10px
					margin: 0 12px
					padding: 6px
					width: 56px
					height:56px
					box-sizing: border-box
					border-radius: 50%
					vertical-align: center
					background: #141d27
					.logo
						width:100%
						height:100%
						background:#2b343c
						text-align:center
						border-radius:50%
						&.highlight
							background: rgb(0, 160, 220)
						.icon-shopping_cart
							color: #898989
							font-size:24px
							line-height:44px
							&.highlight
								color: #fff
					.num
						position: absolute
						top: 0
						right:0
						width: 24px
						height: 16px
						line-height: 16px
						text-align: center
						background: rgb(240, 20, 20)
						color: #fff
						font-size: 9px
						font-weight: 700
						box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.4)
						border-radius: 6px
				.price
					display:inline-block
					font-size:16px
					font-weight:700
					color: rgba(255, 255, 255, 0.4)
					line-height:24px
					padding-right:12px
					margin-top:12px
					vertical-align:top
					box-sizing:border-box
					border-right:1px solid rgba(255,255,255,0.1)
					&.highlight
						color: #fff
				.desc
					display:inline-block
					font-size:10px
					font-weight:700
					color: rgba(255, 255, 255, 0.4)
					line-height:24px
					margin-top:12px
					margin-left:12px
					vertical-align:top
					box-sizing:border-box
			.content-right 
				flex:0 0 105px
				width:105px
				.delivery
					height:48px
					line-height:48px
					font-size:12px
					font-weight:700
					background:#2b333b
					color: rgba(255, 255, 255, 0.4)
					text-align:center
					&.not-enough
						background: #2b333b
					&.enough
						background: #00b43c
						color: #fff
		.ball-container
			.ball
				position:fixed
				left:32px
				bottom:22px
				z-index:200
				.inner
					width:15px
					height:15px
					border-radius:50%
					background:#00A0DC
					transition:all 1s linear
				&.drop-enter-active
					transition:all 1s cubic-bezier(0.49, -0.29, 0.75, 0.41)
				&.drop-enter
					transform translate3d(0, -400px, 0)
					.inner
						transform translate3d(300px, 0, 0)
				&.drop-enter-to
					transform translate3d(0, 0, 0)
					.inner
						transform translate3d(0, 0, 0)
		.shopcart-list
			position:absolute
			top:0
			left:0
			z-index:-1
			width:100%
			transform:translate3d(0, -100%, 0)
			&.fade-enter-active,&.fade-lever-active
				transition:all 0.5s linear
				transform:translate3d(0, -100%, 0)
			&.fade-enter,&.fade-leave-active
				transform:translate3d(0, 0, 0)	
			.list-header
				height:40px
				line-height:40px
				padding:0 18px
				background:#f3f5f7
				border-bottom 1px solid rgba(7, 17, 27, 0.1)
				.title 
					float:left
					font-size:14px
					color:rgb(7,17,27)
				.empty
					float:right
					font-size:12px
					color:rgb(0,160,220)
			.list-content
				padding:0 18px
				max-height:217px
				overflow:hidden
				background:#fff	
				.food
					position:relative
					padding:12px 0
					box-sizing:border-box
					border-bottom:1px solid rgba(7,17,27,0.1)
					.name
						font-size:14px
						line-height:24px
						color:rgb(7,17,27)
					.price
						position:absolute
						right:90px
						bottom:12px
						line-height:24px
						font-size:14px
						font-weight:700
						color:rgb(240,20,20)
					.cartcontrol-wrap
						position:absolute
						right:0
						bottom:6px
		.list-mask
			position:fixed
			top:0
			left:0
			width:100%
			height:100%
			z-index:-2
			backdrop-filter:blur(10px)
			opacity:1
			background:rgba(7,17,27,0.6)
			&.fade-enter-active,&.fade-lever-active
				opacity:1
				transition:all 0.5s 
				background:rgba(7,17,27,0.6)
			&.fade-enter,&.fade-leave-active
				opacity:0 
				background:rgba(7,17,27,0)
				 	
</style>